.message-page {
 display: flex;
 flex-direction: column;
  background: #F0F0F0;
  height: 100vh;
  .msg-box{
    .msg-item{
      background: #FFFFFF;
      margin: 32rpx 32rpx 0 18rpx;
      padding: 38rpx;
      border-radius: 16rpx;
      .msg{
        display: flex;
        justify-content: space-between;
        .msg-state{
          font-size: 21rpx;
        }
        .unread{
          color: #929292;
        }
        .unread::before {
          content: "";
          display: inline-block;
          width: 10rpx;
          height: 10rpx;
          border-radius: 100%;
          background-color: #929292;
          margin-right: 8rpx;
          margin-left: 8rpx;
          vertical-align: middle;
          border-radius: 20rpx;
        }
        .read{
          color: #FE7407;
        }
        .read::before {
          content: "";
          display: inline-block;
          width: 10rpx;
          height: 10rpx;
          border-radius: 100%;
          background-color: #FE7407;
          margin-right: 8rpx;
          margin-left: 8rpx;
          vertical-align: middle;
          border-radius: 20rpx;
        }
        .msg-time{
          color: #999898;
          font-size: 19rpx;
        }
      }
      .msg-title{
        color: #272626;
        font-size: 31rpx;
        font-weight: bold;
        margin-top: 30rpx 0;
        margin-left: 30rpx;
      }
      .msg-text{
        color: #272626;
        font-size: 26rpx;
        margin-left: 30rpx;
      }
    }
  }
}
